<template>
  <div class="container">
    <div class="header-c">
      <div
        class="header-l"
        @click="selectCity()"
      >
        <i
          class="icon mt-location-o"
          :style="{color: '#434343', 'font-size': 38 + 'rpx'}"
        ></i>
        <span>{{city}}</span>
        <i
          class="icon mt-arrow-down-o"
          :style="{color: '#434343', 'font-size': 28 + 'rpx'}"
        ></i>
      </div>
      <div class="header-r">
        <div class="search-bar">
          <i class="icon mt-search-o"></i>
          <input
            placeholder="请输入收货地址"
            placeholder-style="font-size: 24rpx"
            v-model="inputSeach"
            @input="bindInpt()"
          />
          <div class="cancle">
            <i class="icon qb-icon-cancle-o"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="addressList">
      <div
        v-for="(item,index) in addressList"
        :key="index"
        class="add_"
        @click="getAddress(item.name,item.location)"
      >
        <span class="address_name">{{item.name}}</span>
        <span class="address_desc">{{item.district}}{{item.address}}</span>
      </div>
    </div>
    <div
      class="location-c"
      :class="[addressList!=''?'none':'']"
    >
      <span class="c-l">{{address}}</span>
      <div
        class="c-r"
        @click="backhome"
      >
        <i class="icon mt-relocation-o"></i>
        <span>重新定位</span>
      </div>
    </div>

    <!-- 我的收货地址 -->
    <div
      class="my-address"
      v-if="isLogin"
    >
      <div class="header">
        <i class="icon mt-myhome-o"></i>
        <span>我的收获地址</span>
      </div>
      <div class="list-c">
        <div
          class="item"
          v-for="(item, index) in myAddress"
          :key="index"
        >
          <span class="i-t">{{item.address}}</span>
          <div class="i-b">
            <span class="b-l">{{item.addressee}}</span>
            <span class="b-r">{{item.phone}}</span>
          </div>
        </div>
      </div>
    </div>

    <div
      class="nearby-address"
      :class="[addressList!=''?'none':'']"
    >
      <div class="header">
        <i class="icon mt-location-o"></i>
        <span>附近地址</span>
      </div>
      <div class="list-c">
        <div
          class="item"
          v-for="(item, index) in nearbyAddress"
          :key="index"
          @click="getNearTo(item.address,item.location)"
        >
          <span>{{item.address}}</span>
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
    <div
      class="footer-c"
      @click="addAddress"
      :class="[addressList!=''?'none':'']"
    >
      <i class="icon mt-add-o"></i>
      <span>新增收货地址</span>
    </div>
  </div>
</template>

<script>
export default {
	data() {
		return {
			seach1: '',
			addressList: [],
			weidu: '',
			jingdu: '',
			inputSeach: '', //输入地址
			address: '', //当前地址
			city: '', //当前城市
			cityData: {},
			myAddress: [],
			nearbyAddress: [],
			isLogin: false,
		}
	},
	onLoad(options) {
		var address = this.$store.state.user.address
		var city = this.$store.state.user.city
		this.address = address
		this.city = city
	},
	onShow() {
		this.isLogin = this.$store.state.user.islogin
		if (this.$store.state.user.islogin) {
			this.getSelfAddress()
		}
	},

	methods: {
		// 获取个人收货地址
		getSelfAddress() {
			let getParams = {
				url: '/miniprogramOrder/userAddressList',
				data: {
					userId: wx.getStorageSync('userId'),
				},
				method: 'POST',
			}
			this.$JZWX(getParams).then(re => {
				this.myAddress = re.data
				if (this.myAddress.length > 0) {
					this.isLogin = true
				}
				console.log('个人收货地址', this.myAddress)
			})
		},
		//选择城市
		selectCity() {
			wx.navigateTo({url: '/pages/citys/main'})
		},
		//获取地址
		getAddress(name, jingweidu) {
			if (jingweidu.length == 0) {
				return false
			} else {
				var jwd = jingweidu.split(',')
				wx.setStorageSync('latitude', jwd[1])
				wx.setStorageSync('longitude', jwd[0])
				wx.setStorageSync('searchData', name)
				wx.switchTab({
					url: '/pages/home/main',
					success: function(e) {
						var page = getCurrentPages().pop()
						if (page == undefined || page == null) return
						page.onLoad()
					},
				})
			}
		},
		//获取经纬度
		//获取附近地址
		getadress() {
			var that = this
			wx.getLocation({
				type: 'wgs84',
				success: function(res) {
					var latitude = res.latitude
					var longitude = res.longitude
					that.weidu = latitude
					that.jingdu = longitude
					wx.request({
						url:
							'https://restapi.amap.com/v3/place/around?key=e80eace082b331e7da1bce2f3d7b73ec&keywords=' +
							that.seach1 +
							'&location=' +
							that.jingdu +
							',' +
							that.weidu,
						success(res) {
							that.nearbyAddress = res.data.pois
						},
					})
				},
			})
		},
		getA() {
			if (this.jingdu != '' || this.weidu != '') {
				this.GetNearAddress()
			}
		},
		//获取附近地址并带到首页
		getNearTo(name, jingweidu) {
			if (jingweidu.length == 0) {
				return false
			} else {
				var jwd = jingweidu.split(',')
				wx.setStorageSync('latitude', jwd[1])
				wx.setStorageSync('longitude', jwd[0])
				wx.setStorageSync('searchData', name)
				wx.switchTab({
					url: '/pages/home/main',
					success: function(e) {
						var page = getCurrentPages().pop()
						if (page == undefined || page == null) return
						page.onLoad()
					},
				})
			}
		},
		//用户输入
		bindInpt() {
			var seach = this.inputSeach
			var that = this
			wx.request({
				url:
					'https://restapi.amap.com/v3/assistant/inputtips?key=e80eace082b331e7da1bce2f3d7b73ec&keywords=' +
					seach +
					'&location=' +
					this.jingdu +
					',' +
					this.weidu +
					'&city=' +
					this.city +
					'&datatype=all',
				success(res) {
					that.addressList = res.data.tips
				},
			})
		},
		addAddress() {
			wx.navigateTo({url: '/pages/addAddress/main'})
		},
		backhome() {
			wx.clearStorage()
			wx.switchTab({
				url: '/pages/home/main',
				success: function(e) {
					var page = getCurrentPages().pop()
					if (page == undefined || page == null) return
					page.onLoad()
				},
			})
		},
	},
	mounted() {},
	created() {
		this.getadress()
	},
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	.header-c {
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: white;
		padding: 0 30rpx;
		border-bottom: 2rpx solid $spLine-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		.header-l {
			display: flex;
			align-items: center;
			span {
				font-size: 28rpx;
				color: $textBlack-color;
				margin: 0 10rpx;
			}
		}
		.header-r {
			display: flex;
			align-items: center;
			flex: 1;
			.search-bar {
				align-items: center;
				justify-content: center;
				display: flex;
				flex: 1;
				background-color: #f6f6f6;
				height: 70rpx;
				border-radius: 8rpx;
				padding-left: 20rpx;
				margin-left: 30rpx;
				i {
					margin-right: 10rpx;
					color: #999999;
					font-size: 32rpx;
				}
				input {
					display: flex;
					flex: 1;
					width: 100%;
					font-size: 28rpx;
					height: 32rpx;
					margin-top: 5rpx;
				}
				.cancle {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50rpx;
					height: 60rpx;
					margin-left: 20rpx;
					i {
						color: #999999;
						font-size: 40rpx;
					}
				}
			}
		}
	}
	.addressList {
		width: 100%;
		background: white;
		padding-top: 100rpx;
		.add_ {
			width: 95%;
			margin: auto;
			border-bottom: 2rpx solid #e1e1e1;
			padding: 26rpx;
			line-height: 16px;

			.address_name {
				font-size: 30rpx;
				font-family: '楷体';
				display: block;
			}
			.address_desc {
				font-size: 25rpx;
				font-family: '楷体';
				color: #989898;
			}
		}
	}
	.location-c {
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: white;
		padding: 0 30rpx;
		border-bottom: 2rpx solid $spLine-color;
		// margin-top: 100rpx;
		.c-l {
			font-size: 32rpx;
			color: $textBlack-color;
			flex: 1;
		}
		.c-r {
			display: flex;
			align-items: center;
			i {
				font-size: 36rpx;
				color: $theme-color;
			}
			span {
				font-size: 28rpx;
				color: $theme-color;
				margin-left: 10rpx;
			}
		}
	}
	.none {
		display: none;
	}
	.my-address {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-bottom: 2rpx solid $spLine-color;
		padding-top: 30rpx;
		.header {
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx;
			background-color: white;
			i {
				font-size: 28rpx;
				color: $textDarkGray-color;
			}
			span {
				font-size: 24rpx;
				color: $textDarkGray-color;
				margin-left: 20rpx;
			}
		}
		.list-c {
			display: flex;
			flex-direction: column;
			margin-left: 70rpx;
			margin-right: 20rpx;
			.item {
				display: flex;
				flex-direction: column;
				height: 120rpx;
				background-color: white;
				justify-content: center;
				border-bottom: 2rpx solid $spLine-color;
				.i-t {
					font-size: 28rpx;
					color: $textBlack-color;
				}
				.i-b {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					.b-l {
						font-size: 20rpx;
						color: $textDarkGray-color;
					}
					.b-m {
						font-size: 20rpx;
						color: $textDarkGray-color;
						margin-left: 20rpx;
					}
					.b-r {
						font-size: 20rpx;
						color: $textDarkGray-color;
						margin-left: 60rpx;
					}
				}
			}
		}
		.footer {
			display: flex;
			align-items: center;
			height: 88rpx;
			margin-left: 70rpx;
			span {
				font-size: 24rpx;
				color: $textDarkGray-color;
			}
			i {
				font-size: 32rpx;
				color: $textDarkGray-color;
				margin-left: 10rpx;
			}
		}
	}
	.none {
		display: none;
	}
	.nearby-address {
		display: flex;
		flex-direction: column;
		background-color: white;
		padding-top: 30rpx;
		margin-bottom: 88rpx;
		.header {
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx;
			i {
				font-size: 38rpx;
				color: $textDarkGray-color;
			}
			span {
				font-size: 24rpx;
				color: $textDarkGray-color;
				margin-left: 20rpx;
			}
		}
		.list-c {
			display: flex;
			flex-direction: column;
			margin-left: 70rpx;
			margin-right: 20rpx;
			background-color: magenta;
			.item {
				display: flex;
				flex-direction: column;
				height: 88rpx;
				background-color: white;
				justify-content: center;
				border-bottom: 2rpx solid $spLine-color;
				span {
					font-size: 25rpx;
					color: $textBlack-color;
				}
			}
			.item:last-child {
				border-bottom: 0rpx solid $spLine-color;
			}
		}
	}
	.none {
		display: none;
	}
	.footer-c {
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		justify-content: center;
		border-top: 2rpx solid $spLine-color;
		i {
			font-size: 36rpx;
			color: $theme-color;
		}
		span {
			font-size: 28rpx;
			color: $textBlack-color;
			margin-left: 10rpx;
		}
	}
	.none {
		display: none;
	}
}
</style>


